<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{margin: 0;padding: 0;}
			a{text-decoration: none;}
			.car{width: 600px;height: 500px;margin:0 auto;border:1px solid #666;}
			.car .item{margin-bottom: 10px;border: 1px solid #666;}
			.car .item .con{padding: 10px;}
			.car .choose{width: 20px;height: 20px;color: red;vertical-align: middle;}
			.car .title{width:95%;height: 30px;border-bottom: 1px solid #999;padding: 5px;margin: 0 auto;line-height: 30px;}
			.car .title .store{display: inline-block;vertical-align: center;}
			.car img{vertical-align: top;}
			.car .goodName{width: 200px;vertical-align: top;display: inline-block;font-size: 15px;}
			.car .price{font-weight: 700;font-size: 15px;}
			.car .num{width: 50px;height: 23px;float: left;text-align: center;}
			.car .jian:hover,.plus:hover{color: red;}
			.car .jian,.plus{width: 30px;border: 1px solid #666;float:left;text-align: center;font-size: 25px;color: #666;line-height: 25px;}
			.car .chooseNum{margin-top: 10px;display: inline-block;margin-left: 20px;}
			.jiesuan{width: 100%;margin-top: 50px;border:1px solid #007AFF;text-align: right;}
			.jiesuan button{padding:10px 15px ;background:#FF4400 ;border: 1px solid #666;color: #fff;outline: none;font-size: 20px;letter-spacing: 5px;}
			.jiesuan .bill{color: #FF4400;font-size: 20px;}
		</style>
	</head>
	<body>
		<div class="car">
			<div class="item">
				<div class="title">
					<input type="checkbox" name="" id="" value="" class="choose" />
					<div class="store">
						<span>店铺：向薇旗舰店</span>
					</div>
				</div>
				<div class="con">
					<input type="checkbox" name="" id="" value=""  class="choose" />
					<img src="https://img.alicdn.com/bao/uploaded/i3/1696910008/TB2IGV5ib_I8KJjy1XaXXbsxpXa_!!1696910008.jpg_80x80.jpg"/>
					<span class="goodName">秋冬季加厚珊瑚绒睡衣女人长袖法兰绒可爱春秋大码家居服韩版套装</span>
					<span class="price">50.00</span>
					<div class="chooseNum">
						 <a href="#" class="jian">-</a>
					     <input type="text" name="" id="" value="1" class="num"/>
					     <a href="#" class="plus">+</a>
					</div>
				</div>
			</div>
			
			<div class="item">
				<div class="title">
					<input type="checkbox" name="" id="" value="" class="choose" />
					<div class="store">
						<span>店铺：向薇旗舰店</span>
					</div>
				</div>
				<div class="con">
					<input type="checkbox" name="" id="" value=""  class="choose" />
					<img src="https://img.alicdn.com/bao/uploaded/i3/1696910008/TB2IGV5ib_I8KJjy1XaXXbsxpXa_!!1696910008.jpg_80x80.jpg"/>
					<span class="goodName">秋冬季加厚珊瑚绒睡衣女人长袖法兰绒可爱春秋大码家居服韩版套装</span>
					<span class="price">30.00</span>
					<div class="chooseNum">
						 <a href="#" class="jian">-</a>
					     <input type="text" name="" id="" value="1" class="num"/>
					     <a href="#" class="plus">+</a>
					</div>
				</div>
			</div>
			
			
			<div class="jiesuan">
				<span>总共需要支付：</span>
				<span class="bill">50</span>元
				<button>去结算</button>
			</div>
			
			
			<script type="text/javascript">
				var plus = document.getElementsByClassName('plus');
				var jian = document.getElementsByClassName('jian');
				var num = document.getElementsByClassName('num');
				var bill = document.getElementsByClassName('bill')[0];
				var price = document.getElementsByClassName('price');
				var count = [1,1];
				
				for(var i = 0;i<plus.length;i++){
					var priceList = [50,30];
					(function (i){
						plus[i].onclick = function(){
						count[i]++;
					 	console.log(count[i]);
					 	num[i].value = count[i];
					 	priceList[i] = count[i]*(price[i].innerText);
					     bill.innerText = priceList[0]+priceList[1] ;
						if(count[i]>0){
							jian[i].style.background = '#fff';
						}
					 	
					 }
						} )(i);
				}
				
				for(var i = 0;i<jian.length;i++){
				  (function (i){
				  	jian[i].onclick = function(){
				 	count[i]--;
				 	num[i].value = count[i];
				    priceList[i] = count[i]*price[i].innerText;
				    bill.innerText = priceList[0]+priceList[1] ;
				 	if(count[i] < 1){
				 		jian[i].onclick = null;
				 		jian[i].style.background = 'gray';
					  }
				 	}
				  })(i);
          }
				 
				 
				 
				
			</script>
			
		</div>
	</body>
</html>
